import React from 'react';
import {connect} from 'dva';
import {withRouter} from 'dva/router';
import {Layout} from '../../../components';
// import {filterText} from '../../../utils/content';
import {Input ,Modal,Divider, Tag,Button,Tabs,Checkbox } from 'antd';
const {Topic,InputItem,Previewer,PreviewerLabel,DataTable,License,DateRange} = Layout;
const TabPane = Tabs.TabPane;
const { TextArea } = Input;
const data1Label=[{
    title:'企业代码',
},{
    title:'企业代码1',
    disabled:true,
    supply:'元'
},{
    title:'企业代码2',
    type:'textarea',
    line:true,
},{
    title:'企业代码3',
    type:'select',
},{
    title:'企业代码4',
    type:'calendar',
},{
    title:'账户类型',
    line:true,
    supply:<a href="javascript:;">账户核对</a>
},{
    title:'账户类型1',
    line:true,
    supply:<Checkbox>同步渠道账户</Checkbox>
},{
    title:'模糊匹配',
    type:'searchSelect',
}]
const data2Label = [{
  title: '企业代码',
}, {
  title: '企业代码1',
  disabled: true,
}, {
  title: '企业代码2',
  type: 'textarea',
  line: true,
}, {
  title: '企业代码3',
  type: 'select',
}, {
  title: '企业代码4',
  type: 'calendar',
}]
const columns = [
    {
        title: '渠道编号',
        dataIndex: 'channelCode',
    }, {
        title: '渠道名称',
        dataIndex: 'channelName',
    }, {
        title: '费率',
        dataIndex: 'fee',
    }, {
        title: '费率说明',
        dataIndex: 'feeDesc',
    }, {
        title: '操作人',
        dataIndex: 'lastmodifiedByName',
    }, {
        title: '更新时间',
        dataIndex: 'lastmodifiedTime',
    }
];
function saveData(allData){
    console.log(allData);
    return allData
}

const view=[{
    src: 'http://img1.imgtn.bdimg.com/it/u=92660268,3265807957&fm=200&gp=0.jpg', alt: '',
},{
    src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3814013110,3786119637&fm=27&gp=0.jpg', alt: '',
}]
const view1=[{
    src: 'http://img3.imgtn.bdimg.com/it/u=1607863997,646240312&fm=27&gp=0.jpg', alt: '',
}]


class TabTable extends React.Component{
    constructor(props){
        super(props)
        this.state={

        }
    }
    change(key) {
        console.log(key);
    }
    render(){
        const {tableProps}=this.props
        
        return(
            <div className="tabTable">
               
                <div className="tabContent">
                    <Tabs  onChange={this.change.bind(this)}>
                        <TabPane tab="流水明细" key="1"> 
                            <div className="tabButton">
                                <Button>数据导出</Button>
                            </div>
                            <DataTable {...tableProps} />
                        </TabPane>
                        <TabPane tab="交易明细" key="2"> 
                            <div className="tabButton">
                                <Button>导出账单</Button>
                                <Button>下载回单</Button>
                            </div>
                            <DataTable {...tableProps} />
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        )
    }
}
// 保存弹窗
class ModalSave extends React.Component {
    constructor(props){
        super(props)
        this.state={
            visible: false
        }
    }
    componentWillReceiveProps(nextProps){
        const {modalSave}=nextProps
        this.setState({
            visible:modalSave
        })
    }
    handleOk = (e) => {
      console.log(e);
      this.setState({
        visible: false,
      });
    }
  
    handleCancel = (e) => {
      console.log(e);
      this.setState({
        visible: false,
      });
    }
  
    render() {
      return (
        <div>
          <Modal
            title="请选择交易日期"
            width={600}
            centered
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
          >
            <div className="labelWrap">
                <div className="labelLeft">
                    <label htmlFor="">
                        交易时间
                    </label>
                    <div className="labelContent labelContentTime">
                        <DateRange/>
                    </div>
                </div>
            </div>
            <div className="labelWrap">
                <div className="labelLeft">
                    <label htmlFor="">
                        交易时间
                    </label>
                    <div className="labelContent">
                        <TextArea placeholder="最多可输入100字" maxLength={100} autosize={{ minRows: 4, maxRows: 6 }}/>
                    </div>
                </div>
            </div>
          </Modal>
        </div>
      );
    }
}
  
class ChannelManageDetail extends React.Component{
    constructor(props){
        super(props)
        this.state={
            imgUrl:[],
            previewerVisible:false,
            modalSave:false
        }
    }
    handlePreviewer(imgUrl){
        this.setState({
            imgUrl,
            previewerVisible:true
        })
    }
    // 保存
    save(){
        this.setState({
            modalSave:true
        })
    }
    render() {
        const {data1,data2,data, page,totalAmount}=this.props.channelManageDetail
        const dataProps={
            allData:{data1,data2},
            saveData
        }
        const previewerProps={
            imgUrl:this.state.imgUrl,
            previewerVisible:this.state.previewerVisible
        }
        const tableProps={
            data,
            page,
            columns,
            totalAmount,
            totalCountTitle:'日志记录',
            // showTableHead:true
        }
        return (
            <div>
              
                <ModalSave modalSave={this.state.modalSave}/>
                <Previewer {...previewerProps}/>
                <div className="inputItemSection">
                    <Topic title="申请信息"/>
                    <div className="inputItemWrap">
                        {
                            data1Label.map((item,index)=>{
                                return(
                                    <InputItem {...item} {...data1[index]} {...dataProps}  dataType="data1"  order={index} key={index}/>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="inputItemSection">
                    <Topic title="执照类型"/>
                    <div className="inputItemWrap">
                        <License/>
                    </div>
                </div>
                <div className="inputItemSection">
                    <Topic title="银行反馈信息"/>
                    <div className="inputItemWrap">
                        {
                            data2Label.map((item,index)=>{
                                return(
                                    <InputItem {...item} {...data2[index]} {...dataProps} dataType="data2"  order={index} order={index} key={index}/>
                                )
                            })
                        }
                    </div>
                    <div className="btn-action clear">
                        <Button type="primary" onClick={this.save.bind(this)}>保存</Button>
                        <Button>取消</Button> 
                    </div>
                  
                </div>
                <div className="inputItemSection">
                    <Topic title="附件信息" supply={<a href="javascript:;">查看变更记录</a>}/>
                    <div className='viewWrap'>
                        {
                            view.map((item,index)=>{
                                return(
                                    <PreviewerLabel  key={index} handlePreviewer={this.handlePreviewer.bind(this,item)} imgUrl={item}/>
                                )
                            })
                        }
                    </div>
                </div>
                <div className="inputItemSection">
                    <Topic title="附件信息1"/>
                    <div className='viewWrap'>
                        {
                            view1.map((item,index)=>{
                                return(
                                    <PreviewerLabel  key={index} handlePreviewer={this.handlePreviewer.bind(this,item)} imgUrl={item}/>
                                )
                            })
                        }
                    </div>
                </div>
                <DataTable {...tableProps}/>
                <div className="inputItemSection">
                    <Topic title="账户流水详情"/>
                    <div className="labelWrap">
                        <div className="labelLeft">
                            <label htmlFor="" className="auto">
                                交易时间
                            </label>
                            <div className="labelContent">
                                <DateRange showButton={true}/>
                            </div>
                        </div>
                    </div>
                    <TabTable tableProps={tableProps}/>
                </div>
            </div>
        )
    }
}
export default withRouter(connect(({channelManageDetail }) => ({channelManageDetail }))(ChannelManageDetail));
